<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="赵鹤阳">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            display: flex;
            overflow: hidden;
        }

        .box {
            width: 200px;
            height: 550px;
            margin: 50px auto;
            border: 1px solid #ddd;
        }

        .box-span {
            width: 100%;
            font-size: 30px;
            text-align: center;
            background-color: #ddd;
        }

        .div-photo {
            margin-top: 15px;
            width: 180px;
            height: 150px;
            margin-left: 10px;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }

        .img-list {
            display: block;
            position: absolute;
            background-color: #ff0066;
            color: #fff;
            text-align: center;
            width: 100%;
            bottom: 0;
        }

        .img-box {
            display: block;
            position: absolute;
            background-color: #ff0066;
            color: #fff;
            text-align: center;
            width: 100%;
            bottom: -22px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-span">
            <span>专辑推荐</span>
        </div>
        <div class="div-photo">
            <ul>
                <li><img src="./img/1_1.jpg" alt=""></li>
                <li><img src="./img/1_2.jpg" alt=""></li>
            </ul>
            <span class="img-list">COCOON/可可尼</span>
            <span class="img-box">几何为网-极致绚烂</span>
        </div>
        <div class="div-photo">
            <ul>
                <li><img src="./img/2_1.jpg" alt=""></li>
                <li><img src="./img/2_2.jpg" alt=""></li>
            </ul>
             <span class="img-list">INSUN/恩裳</span>
            <span class="img-box">2017 春印象</span>
        </div>
        <div class="div-photo">
            <ul>
                <li><img src="./img/3_1.jpg" alt=""></li>
                <li><img src="./img/3_2.jpg" alt=""></li>
            </ul>
             <span class="img-list">JNBY/江南布衣</span>
            <span class="img-box">NANMENG/南梦</span>
        </div>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('ul').hover(function () {
        $(this).stop().animate({ left: -180 }, 1000)
        $(this).nextAll('.img-list').stop().animate({ bottom: -20 }, 1000)
         $(this).nextAll('.img-box').stop().animate({ bottom: 0 }, 1000)
    }, function () {
        $(this).stop().animate({ left: 0 }, 1000)
        $(this).nextAll('.img-box').stop().animate({ bottom: -20 }, 1000)
        $(this).nextAll('.img-list').stop().animate({ bottom: 0 }, 1000)
    });

</script>